<template>
	<u-popup mode="bottom" v-if="show" v-model:show="show">
		<view class="f py4 tab">
			<view class="f1 tac" @click="type=2">
				<text class="fc-primary pb2" :class="{on:type==2}">年份</text>
			</view>
			<view class="f1 tac c9" @click="type=1">
				<text class="pb2" :class="{'fc-primary':type<2,on:type==1}">月份</text>
			</view>
			<view class="f1 tac c9" @click="type=0">
				<text class="pb2" :class="{'fc-primary':type<1,on:type==0}">日期</text>
			</view>
		</view>
		<picker-view class="wt h" :value="picker" indicator-class="h8" @change="change">
			<picker-view-column :scroll-y="true" class="f1">
				<view class="fjc" v-for="i in range[0]" :key="i">{{i}}年</view>
			</picker-view-column>
			<picker-view-column :scroll-y="true" class="f1" v-if="type<2">
				<view class="fjc" v-for="i in range[1]" :key="i">{{i}}月</view>
			</picker-view-column>
			<picker-view-column :scroll-y="true" class="f1" v-if="type==0">
				<view class="fjc" v-for="i in range[2]" :key="i">{{i}}日</view>
			</picker-view-column>
		</picker-view>
		<view class="p6">
			<button type="primary" @click="confirm">确定</button>
		</view>
	</u-popup>
</template>

<script lang="ts">
import util from '@/utils/util'
import Emitter from 'uview-plus/libs/util/emitter'

export default {
	mixins: [Emitter],
	props: {
		value: {
			type: String,
			default: uni.$u.date(util.now()-86400, 'yy-mm-dd')
		},
		min: {
			type: String,
			default: '2021-01-01'
		},
		max: {
			type: String,
			default: uni.$u.date(util.now()-86400, 'yy-mm-dd')
		}
	},
	data() {
		return {
			show: false,
			index: 0,
			type: 0,
			picker: [0,0,0],
			select: [],
			range: [[],[],[]]
		}
	},
	mounted(){  //创建vue实例之后,首次必执行的函数
		const v = this.value.split('-')
		this.select = v
		this.initRange()
		this.$set(this.picker, 0, this.range[0].findIndex(r=>r==v[0]))
		this.type<2 && (this.$set(this.picker, 1, this.range[1].findIndex(r=>r==v[1])))
		this.type<1 && (this.$set(this.picker, 2, this.range[2].findIndex(r=>r==v[2])))
	},
	methods: {
		confirm(e){
			const value = this.select.filter((r,i)=>i<3-this.type).join('-')
			this.$emit('update:value', value)
			this.$emit('change', value)
			this.show = false
			setTimeout(() => {
				this.dispatch('u-form-item', 'onFieldChange', value)
			}, 40)
		},
		change(e){
			const v = e.detail.value
			this.select = [this.range[0][v[0]]]
			this.type<2 && (this.select[1]=this.range[1][v[1]])
			this.type<1 && (this.select[2]=this.range[2][v[2]])
			this.updateRange(e.detail.value)
			this.picker = v
		},
		initRange(){
			const min = this.min.split('-')
			const max = this.max.split('-')
			for(let i = parseInt(min[0]); i <= parseInt(max[0]); i++){
				this.range[0].push(i)
			}
			const startMonth = this.select[0] == min[0] ? min[1] : 1
			const endMonth = this.select[0] == max[0] ? max[1] : 12
			for(let i = startMonth; i <= endMonth; i++){
				this.range[1].push(i.toString().padStart(2, '0'))
			}
			const startDate = this.select[1] == min[1] ? min[2] : 1
			const endDate = this.select[1] == max[1] ? max[2] : [31,this.select[0]%4==0?29:28,31,30,31,30,31,31,30,31,30,31][parseInt(this.select[1])-1]
			for(let i = startDate; i <= endDate; i++){
				this.range[2].push(i.toString().padStart(2, '0'))
			}
		},
		updateRange(v){
			const min = this.min.split('-')
			const max = this.max.split('-')
			if(this.picker[0]!=v[0]){
				const startMonth = this.select[0] == min[0] ? min[1] : 1
				const endMonth = this.select[0] == max[0] ? max[1] : 12
				this.range[1] = []
				for(let i = startMonth; i <= endMonth; i++){
					this.range[1].push(i.toString().padStart(2, '0'))
				}
			}
			if (this.picker[0] != v[0] || this.picker[1] != v[1]) {
				const startDate = this.select[0] == min[0] && this.select[1] == min[1] ? min[2] : 1
				const endDate = this.select[0] == max[0] && this.select[1] == max[1] ? max[2] : [31,this.select[0]%4==0?29:28,31,30,31,30,31,31,30,31,30,31][parseInt(this.select[1])-1]
				this.range[2] = []
				for(let i = startDate; i <= endDate; i++){
					this.range[2].push(i.toString().padStart(2, '0'))
				}
			}
		}
	}
}
</script>
<style scoped>
	.h{height: 30vh}
</style>